import page from "../apis/page";
import {action, observable, toJS} from "mobx";
import ComponentStore from "./form/ComponentStore";
import LeftMenuStore from "./form/LeftMenuStore";
import RightMenuStore from "./form/RightMenuStore";

import defaultTheme from "../components/designer/form/theme/styles/default";

export default class FormDesignerStore {
  @observable appid = '';
  @observable saving = false;
  @observable theme = defaultTheme;
  @observable hasSaved = false; // 表单是否保存过 (保存过后即可看见发布的相关信息)
  @observable shortkey = ''; // 页面shortkey 用于表单访问的唯一标识
  @observable isPublishingVisible = false; // 控制发布窗口
  @observable isRuleVisible = false; // 控制规则窗口
  @observable publishSettings = {};//页面设置信息
  @observable submissionAuthority = [];//填写权限枚举
  @observable fillinFrequency = [];//填写票频率枚举
  @observable readonly = false; // 只读权限

  @observable componentStore = new ComponentStore();
  @observable leftMenuStore = new LeftMenuStore();
  @observable rightMenuStore = new RightMenuStore();

  @action init = (appid, readonly) => {
    if (!appid || appid === this.appid) return;

    this.appid = appid;
    this.readonly = readonly;
    this.componentStore.init(appid).then(coms => {
      this.onhasSavedChange(!!coms.length);
      const{theme} = this.componentStore;

      theme && this.onThemeChange(theme);
    });
    this.leftMenuStore.init();
  }

  @action saveForm = () => {
    const components = this.componentStore.getComponents();

    if (this.saving || this.readonly) return;

    this.saving = true;

    page.save(this.appid, components, this.theme || "").then(() => {
      this.saving = false;
      this.onhasSavedChange(true);
    }).catch(() => {
      this.saving = false;
      this.onhasSavedChange(false);
    });
  }

  @action onThemeChange = theme => {
    this.theme = theme;
  }

  @action getPagekey = () => {
    if (this.shortkey) return;

    page.getShortKey(this.appid).then(shortkey => {
      this.shortkey = shortkey;
    });
  }

  @action getSetInfo = () => {
    page.getSetInfo(this.appid).then(info => {
      info.startTime = info.startTime ? info.startTime : ' 00:00';
      info.endTime = info.endTime ? info.endTime : ' 00:00';
      this.publishSettings = info;
    });
  }

  @action getSubmissionAuthority = () => {
    if (this.submissionAuthority.length) return;

    page.getSubmissionAuthority().then(data => {
      this.submissionAuthority = data;
    });
  }

  @action getFillinFrequency = () => {
    if (this.fillinFrequency.length) return;

    page.getFillinFrequency().then(data => {
      this.fillinFrequency = data;
    });
  }

  @action setUpdate = () => {
    let data = toJS(this.publishSettings);
    data.appid = this.appid;
    Object.keys(data).map(v =>{
      data[v] = data[v]&&data[v].toString() ? data[v].toString() : '';
    })
    return page.setUpdate(data);
  }

  @action onSetChange = (key,value) => {
    switch(key){
      case 'fillinEnabled':
      case 'timeRangeEnabled':
      case 'dataUpperLimitEnabled':
      case 'dailyTimeRangeEnabled':
        value = value==='1' ? true : false;
        break;
      case 'startDate':
      case 'endDate':
        key = key==='startDate' ? 'startTime' : 'endTime';
        value = value +' '+ this.publishSettings[key].split(' ')[1];
        break;
      case 'startTime':
      case 'endTime':
        value = this.publishSettings[key].split(' ')[0] + ' ' + value;
        break;
    }
    if(this.publishSettings[key]===value) return;
    this.publishSettings[key] = value;
  }

  @action showPublishingDialog = () => {
    this.isPublishingVisible = true;
  }

  @action showRuleDialog = () => {
    this.isRuleVisible = true;
  }

  @action hidePublishingDialog = () => {
    this.isPublishingVisible = false;
  }

  @action hideRuleDialog = () => {
    this.isRuleVisible = false;
  }

  onhasSavedChange(ishasSaved) {
    this.hasSaved = ishasSaved;
    ishasSaved && this.getPagekey();
  }
}